import React from 'react'
import {Select} from 'antd'
import Icon from '@ant-design/icons'
import * as icons from '@ant-design/icons'
import {IconFont, IconFontList} from '@/utils/common/tool'

const {Option} = Select

export interface iconSelectProps {
	// eslint-disable-next-line react/require-default-props
	placeholder?: string
	callBack: any
	defValue: any
}
const iconoscope: any = icons
const iconList = Object.keys(iconoscope).filter(
	(item) => typeof iconoscope[item as keyof typeof iconoscope] === 'object',
)
const list = [...iconList, ...IconFontList]
// eslint-disable-next-line react/function-component-definition
const IconSelect: React.FC<iconSelectProps> = ({
	placeholder = '请选择图标',
	callBack,
	defValue,
}) => (
	<Select
		placeholder={placeholder}
		showSearch
		allowClear
		value={defValue}
		onChange={(value: {value: string; label: React.ReactNode}) =>
			callBack(value)
		}
		style={{width: '100%'}}>
		{list.map((item: any) => {
			if (item.type) {
				return (
					<Option value={item.type} key={item.type}>
						<IconFont
							type={item.type}
							style={{marginRight: '8px'}}
							key={item.type}
						/>
						{item.type}
					</Option>
				)
			}
			const component = iconoscope[item]
			return (
				<Option value={item} key={item}>
					<Icon component={component} style={{marginRight: '8px'}} />
					{item}
				</Option>
			)
		})}
	</Select>
)

export default IconSelect
